<template>
  <div class="public">
    <header class="header">
      <button class="back-button" @click="handleBackClick">返回</button>
      <h1 class="header-title">实时检测</h1>
    </header>
    <el-main style="background-color: #f3f4f6; flex: 1; width: 410px">
      <el-table :data="feedbackHis" style="width: 410px">
        <!--展示列2-->

        <el-table-column label="地点" width="160px">
          <template #default="item">
            <el-text>
              {{ item.row.faddress }}
            </el-text>
          </template></el-table-column
        >
        <!--展示列3-->
        <el-table-column label="预估AQI" prop="aid" width="130px">
          <template #default="item">
            <el-tag> {{ item.row.aid }}</el-tag>
            <el-tag
              :style="{ backgroundColor: item.row.color }"
              style="color: white; font-weight: bold"
              >{{ item.row.aqiExpln }}</el-tag
            >
          </template></el-table-column
        >
        <el-table-column type="expand">
          <template #default="item"
            ><el-descriptions class="margin-top" :column="1" :size="small" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">开始时间</div>
                </template>
                {{ this.$formatDate(item.row.createtime, 'YYYY-MM-DD hh:mm:ss') }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">完成时间</div>
                </template>
                {{ this.$formatDate(item.row.feedbackInfo.updatetime, 'YYYY-MM-DD hh:mm:ss') }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <tickets />
                    </el-icon>
                    备注
                  </div>
                </template>
                {{ item.row.remark }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <Location />
                    </el-icon>
                    实际 AQI
                  </div>
                </template>
                {{ item.row.feedbackInfo.aqilevel }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions column="3" class="margin-top" :size="small" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">SO₂</div>
                  <el-tag>{{ item.row.feedbackInfo.so2level }}级</el-tag>
                </template>
                {{ item.row.feedbackInfo.so2value }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">CO</div>
                  <el-tag>{{ item.row.feedbackInfo.colevel }}级</el-tag>
                </template>
                {{ item.row.feedbackInfo.covalue }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">悬浮物</div>
                  <el-tag>{{ item.row.feedbackInfo.spmlevel }}级</el-tag>
                </template>
                {{ item.row.feedbackInfo.spmvalue }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

import { Gridors } from '@/stores/gridor.js'
import { storeToRefs } from 'pinia'
import { Iphone, Location, Tickets, User } from '@element-plus/icons-vue'

const gridors = Gridors()

const { feedbackHis } = storeToRefs(gridors)

onMounted(() => {
  gridors.loadHis()
})
const handleBackClick = () => {
  // 跳转回上一页
  gridors.goback()
}
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #007bff;
}

.header-title {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 0 20px;
}
.aqi {
  background-color: #f1f5f9;
}

.public {
  width: 410px;
  height: 640px;
}
</style>
